<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="16" :offset="4">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>全部话题</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <div v-for="(o,index) in 10" v-show="index % 2 === 0" :key="o" class="topicItem">
                <el-avatar shape="square" :size="70" :src="squareUrl"></el-avatar>
                <div class="topicInfo">
                  <a href="" class="topicName">养生</a>
                  <!--24个字-->
                  <p class="topicIntroduction">{{ '最新鲜的热点讨论，经验+2不来一下吗我是谁我！' + o }}</p>
                </div>
                <el-button type="primary" circle>
                  <font-awesome-icon :icon="['far', 'heart']"></font-awesome-icon>
                </el-button>
              </div>
            </el-col>
            <el-col :span="12">
              <div v-for="(o,index) in 10" v-show="index % 2 === 1" :key="o" class="topicItem">
                <el-avatar shape="square" :size="70" :src="squareUrl"></el-avatar>
                <div class="topicInfo">
                  <a href="" class="topicName">养生</a>
                  <p class="topicIntroduction">{{ '最新鲜的热点讨论，经验+2不来一下吗dfsffa！！ ' + o }}</p>
                </div>
                <el-button type="primary" circle>
                  <font-awesome-icon :icon="['far', 'heart']"></font-awesome-icon>
                </el-button>
              </div>
            </el-col>
          </el-row>

        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      squareUrl: 'https://upload-bbs.mihoyo.com/upload/2019/07/15/3ad229bf0c7a31c6d7d1e931c2a7b393.png?x-oss-process=image/resize,s_150/quality,q_80/auto-orient,0/interlace,1/format,jpg'
    }
  },
  created () {
  },
  // DOM对象加载完成时
  mounted () {
  },
  methods: {},
  computed: {},
  name: 'allTopic',
  components: {}
}
</script>

<style lang="less" scoped>
.topicItem {
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #f0f0f0;
  padding: 24px 30px;
}
.topicItem:hover{
  border: 1px solid #00c3ff;
}

.topicInfo {
  a{
    font-weight: 510;
  }
  p {
    color: #999999;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
  }
}
</style>
